import React, { Component } from 'react'
import { Text, View, Button } from 'react-native'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons'

import FlexboxStackScreen from './RNFlexboxStack'
import RNComponentsScreen from './RNComponentsStack'
import RNNavigationStackScreen from './RNNavigationStack'

const Tab = createMaterialTopTabNavigator();

const RNTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        labelStyle: { fontSize: 12 },
        tabStyle: { 
          // width: 100 
        },
        style: { backgroundColor: 'powderblue' },
        showIcon: true, // 是否显示图标
      }}
    >
      <Tab.Screen
        name="FlexboxStack"
        component={FlexboxStackScreen} 
        options={{
          title: '弹性布局',
          tabBarIcon: () => {
            return (
              <Ionicons name={"person"} size={20} />  
            )
          }
        }}
      />
      <Tab.Screen
        name="RNNavigationStack" 
        component={RNNavigationStackScreen} 
        options={{
          title: 'RN 导航',
        }}
      />
      <Tab.Screen
        name="RNComponentsStack" 
        component={RNComponentsScreen} 
        options={{
          title: '材质标签',
          tabBarLabel: () => {
            return (
              <Button title="RN 组件" />
            )
          }
        }}
      />
    </Tab.Navigator>
  )
}


const Stack = createStackNavigator();

export default class RNStack extends Component {
  render() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="RNTab" component={RNTab} options={{
          title: 'React Native 基础'
        }} />
      </Stack.Navigator>
    )
  }
}

